<template>
  <view>
    <view class="address" v-for="(v, i) in addressList" :key="i">
      <view>
        <text>{{ v.nickname }}---{{v.tel}}</text>
      </view>
      <view class="">
        <text>{{ v.address }}</text>
      </view>
      <view class="">
        <button @click="editFn(v)">编辑</button>
        <button @click="handleDelete(v)">删除</button>
      </view>
    </view>
    <navigator url="../address_add/address_add"><button>添加一组数据</button></navigator>
    <view class="dialog" v-show="show">
      <input type="text" v-model="edit.nickname" placeholder="请输入昵称">
      <input type="text" v-model="edit.tel" placeholder="请输入电话">
      <input type="text" v-model="edit.address" placeholder="请输入地址">
      <button @click="handleEdit">修改数据</button>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getAddress()
    },
    data() {
      return {
        addressList: [],
        show: false,
        edit: {}
      };
    },
    methods: {
      async getAddress() {
        const resp = await uniCloud.callFunction({
          name: 'getAddress'
        })
        this.addressList = resp.result.data
      },
      async handleDelete(v) {
        const id = v._id;
        const resp = await uniCloud.callFunction({
          name: 'deleteAddress',
          data: {
            id
          }
        })
        this.getAddress()
      },
      editFn(v) {
        this.show = true
        this.edit = v
      },
      async handleEdit() {

        const resp = await uniCloud.callFunction({
          name: "updateAddress",
          data: this.edit
        })
        console.log(resp)
        this.show = false
        this.getAddress()
      }
    }
  }
</script>

<style lang="scss">
  .address {
    border-bottom: 1px solid #ccc;
  }

  .dialog {
    position: fixed;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 999;
    width: 100vw;
    height: 100vh;
  }
</style>
